$(function () {
  const layer = layui.layer;
  const form = layui.form;
  const laypage = layui.laypage;
  // 定义一个查询参数
  let query = {
    pagenum: 1, // 页码值，默认请求第一页的数据
    pagesize: 2, // 每页显示几条数据，默认每页显示2条
    cate_id: "", // 文章分类的 Id
    state: "" // 文章的发布状态
  };

  // 定义一个美化时间的过滤器
  template.defaults.imports.dateFormat = function (date) {
    return date.split(".")[0];
  };

  initTableList();
  initCate();

  // 获取文章列表数据
  function initTableList() {
    $.ajax({
      type: "GET",
      url: "/my/article/list",
      data: query,
      success: function (res) {
        if (res.status !== 0) return layer.msg(res.message);
        // 定义模板 渲染表格列表
        let htmlStr = template("tpl-table", res);
        $("tbody").html(htmlStr);
        // res.total 可以拿到文章的条数 用来定义分页
        renderPage(res.total);
      }
    });
  }
  // 获取文章分类数据
  function initCate() {
    $.ajax({
      type: "GET",
      url: "/my/article/cates",
      success: function (res) {
        if (res.status !== 0) return layer.msg(res.message);
        let htmlStr = template("tpl-cate", res);
        $("[name=cate_id]").html(htmlStr);
        form.render();
      }
    });
  }

  // 实现筛选功能
  $("#form-search").on("submit", function (e) {
    e.preventDefault();
    // 获取表单中选中项的值
    let cateId = $("[name=cate_id]").val();
    let state = $("[name=state]").val();
    // 修改查询对象中的参数
    query.cate_id = cateId;
    query.state = state;
    // 重新渲染文章列表
    initTableList();
  });

  // 定义渲染分页的方法
  function renderPage(total) {
    // 调用 laypage.render() 方法来渲染分页的结构
    laypage.render({
      elem: "pageBox", // 指向存放分页的容器
      count: total, // 数据总数
      limit: query.pagesize, // 每页显示的条数
      curr: query.pagenum, // 起始页
      limits: [2, 3, 5, 10], // 每页条数的选择项
      layout: ["count", "limit", "prev", "page", "next", "skip"], //自定义排版

      // 分页发生切换的时候，触发 jump 回调
      // 触发 jump 回调的方式有两种：
      // 1. 点击页码的时候，会触发 jump 回调
      // 2. 只要调用了 laypage.render() 方法，就会触发 jump 回调
      jump: function (obj, first) {
        // obj包含了当前分页的所有参数，比如：
        // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
        // console.log(obj.limit); //得到每页显示的条数
        // 把最新的页码 和显示条数   赋值给查询参数q中
        query.pagenum = obj.curr;
        query.pagesize = obj.limit;
        // 可以通过 first 的值，来判断是通过哪种方式，触发的 jump 回调
        // 如果 first 的值为 true，证明是方式2触发的
        if (!first) initTableList();
      }
    });
  }

  // let editIndex = null;
  // // 以事件委托的形式 为编辑按钮 绑定事件  使弹出编辑框
  // $("body").on("click", ".btnEdit", function () {
  //   editIndex = layer.open({
  //     type: 1,
  //     title: "修改文章分类",
  //     area: ["500px", "300px"],
  //     content: $("#dialog-edit").html()
  //   });

  //   // 根据 Id 获取文章分类数据 并填充到表单中
  //   let id = $(this).data("id");
  //   $.ajax({
  //     type: "GET",
  //     url: "/my/article/cates/" + id,
  //     success: function (res) {
  //       if (res.status !== 0) return layer.msg(res.message);
  //       // 1.form.val()第一个参数是form的名字。
  //       // 2.form.val()第二个参数是json字符串,需要进行数据转化。
  //       // 3.form.val()必须引入layui中的form模块 lay-filter后使用。
  //       form.val("form-edit", res.data);
  //     }
  //   });
  // });

  // 监听编辑按钮的点击事件;
  $("body").on("click", ".btnEdit", function () {
    location.href = "/home/article/artEdit.html?id=" + $(this).data("id");
  });

  // 实现删除按钮功能
  $("tbody").on("click", ".btn-delete", function () {
    // 获取删除按钮的个数
    let len = $(".btn-delete").length;
    let id = $(this).data("id");
    // 询问框
    layer.confirm("确定删除吗?", { icon: 3, title: "提示" }, function (index) {
      // 点击确定后 也就是在回调函数中 发起ajax请求 根据id删除对应的文章
      $.ajax({
        type: "GET",
        url: "/my/article/delete/" + id,
        success: function (res) {
          if (res.status !== 0) return layer.msg(res.message);
          layer.msg(res.message);
          // 当数据删除完成后，需要判断当前这一页中，是否还有剩余的数据
          // 如果没有剩余的数据了,则让页码值 -1 之后,
          // 再重新调用 initTableList 方法
          if (len === 1) {
            query.pagenum = query.pagenum === 1 ? 1 : query.pagenum - 1;
          }
          initTableList();
        }
      });
      layer.close(index);
    });
  });
});
